<template>
	<view class="h-fill">
		<view class="p-header h-fill">
			<view class="h-fill" :style="{height: statusBarHeight + 'px'}"></view>
			<view :style="{height: navBarHeight + 'px'}" class="h-fill uni-flex align-center l-pad r-pad">
				<shop-select @change="handleShopChange"></shop-select>
			</view>
		</view>
		<view class="top-fixed tab-wrapper" :style="{top: barHeight + 'px'}">
			<u-tabs-dropdown :list="tabs" :current="selectedTabIdx" @change="handleTabChange" @dropdownChange="handleTabDropdownChange" activeColor="#D61719"></u-tabs-dropdown>
		</view>
		<view :style="{'padding-top': barHeight + 40 + 'px'}">
			<view v-if="banners.length" class="pad">
				<swiper :style="{height: swiperHeight + 'px'}" :indicator-dots="true" indicator-active-color="#D61719" :autoplay="true">
					<swiper-item v-for="item in banners" :key="item.id" @click="handleBannerClick(item)">
						<image class="h-fill v-fill" :src="item.pic" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
			</view>
			<goods-list ref="goodsList" :filter="filter"></goods-list>
		</view>
	</view>
</template>
<script>
	import {
		mapState, mapMutations
	} from 'vuex'
	import {getAllStoreList} from "../../api/user.js"
	import {getProdCategories} from "../../api/goods.js"

	let swiperRatio = 3;
	export default {
		data() {
			return {
				tabs: [],
				selectedTabIdx: 0,
				
				filter: {},

				navBarHeight: 44,
				statusBarHeight: 0,

				banners: [],
				swiperHeight: 300,
				
				selectedCategoryId: null,
				shopChanged: true
			};
		},
		watch: {
			userInfo(val) {
				this.loadData();
			},
			currShop(val) {
				this.shopChanged = true;
			}
		},
		computed: {
			...mapState(['userInfo', 'currShop']),
			barHeight() {
				return this.statusBarHeight + this.navBarHeight;
			}
		},
		created() {
			let sysInfo = uni.getSystemInfoSync()
			// #ifdef MP
			let rect = uni.getMenuButtonBoundingClientRect();
			this.statusBarHeight = sysInfo.statusBarHeight;
			let span = rect.top - this.statusBarHeight;
			this.navBarHeight = rect.height + span * 2;
			// #endif
			this.swiperHeight = (sysInfo.windowWidth - uni.upx2px(20) * 2) / swiperRatio;
		},
		onReady() {
			
		},
		onShow() {
			if (this.shopChanged) {
				this.loadData()
				this.shopChanged = false;
			}
		},
		onShareAppMessage() {

		},
		async onPullDownRefresh() {
			await this.loadData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.$refs.goodsList.loadMore()
		},
		methods: {
			...mapMutations(['switchShop']),
			handleShopChange() {
				this.loadData();
			},
			handleTabChange(tabIdx) {
				this.selectedTabIdx = tabIdx;
				if (tabIdx === 0) {
					this.selectedCategoryId = null;
					this.updateFilter();
				} else {
					this.selectedCategoryId = this.tabs[tabIdx].id + '';
					this.updateFilter();
				}
				this.$nextTick(() => {
					this.$refs.goodsList.reload();
				})
			},
			handleTabDropdownChange(idx) {
				// this.$log("dropdownchange", idx);
				if (idx === -1) {
					this.selectedCategoryId = this.tabs[this.selectedTabIdx].id + '';
				} else {
					this.selectedCategoryId = this.tabs[this.selectedTabIdx].children[idx].id + '';
				}
				this.updateFilter();
				this.$nextTick(() => {
					this.$refs.goodsList.reload();
				})
			},
			updateFilter() {
				let filter = {};
				if (this.selectedCategoryId) {
					filter.categoryId = this.selectedCategoryId;
				}
				if (this.currShop.id) {
					filter.storeId = this.currShop.id;
				}
				if (this.selectedTabIdx === 0) {
					filter.recommendStatus = 1;
				}
				this.filter = filter;
				console.log("filter", this.filter);
			},
			handleBannerClick(banner) {
				if (banner.link) {
					uni.navigateTo({
						url: `../public/simple-browser?url=${banner.link}`
					})
				} else if (banner.html) {
					uni.navigateTo({
						url: `../public/banner-detail?id=${banner.id}`
					})
				}
			},
			async loadData() {
				try {
					// await this.loadStoreList();
					await this.loadBanners();
					await this.loadProdCategories();
					this.updateFilter();
					this.$nextTick(() => {
						this.$refs.goodsList.reload()
					})
				} catch (e) {
					this.$log(e);
				}
			},
			async loadBanners() {
				try {
					this.banners = await this.$http.getBannerList("首页");
				} catch (e) {
					this.$log("加载滚动图列表遇到错误", e);
					throw e;
				}
			},
			async loadProdCategories() {
				let data = await getProdCategories();
				if (data) {
					let list = [{name: "热门"}];
					this.tabs = list.concat(data);
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.p-header {
		background-image: linear-gradient(to right, #434AD8, #8E77F5);
		position: fixed;
		z-index: 99;

		&-title-bar {
			&-ic-loc {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}

			&-text {
				// width: 180rpx;
			}

			&-ic-arrow {
				margin-left: 8rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		&-store-info {
			color: #FFFFFF;
			// background-color: rgba($color: #FEFEFE, $alpha: 0.3);
			padding: 8rpx 0;
			border-radius: 40rpx;
		}
	}
</style>
